import './App.less';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import React, { Suspense } from 'react';
import { LoadingOutlined } from '@ant-design/icons';
import { Spin } from 'antd';

const Home = React.lazy(() => import('./views/Home'));
const Test1 = React.lazy(() => import('./views/Test/Test1.tsx'));
const Test2 = React.lazy(() => import('./views/Test/Test2.tsx'));
const Sub1 = React.lazy(() => import('./views/Test/Sub1.tsx'));
const Sub2 = React.lazy(() => import('./views/Test/Sub2.tsx'));
const BasicLayout = React.lazy(() => import('./layout/Basic'));
const antIcon = (
  <LoadingOutlined
    style={{
      fontSize: 24,
    }}
    spin
  />
);

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Suspense fallback={<Spin indicator={antIcon} />}>
          <Routes>
            <Route path='*' element={<Navigate to="/home" />} />
            <Route exact path='/' element={<BasicLayout />} >
              <Route index element={<Home />} />
              <Route exact path='home' element={<Home />} />
              <Route exact path='test' >
                <Route exact path="page1" element={<Test1 />} />
                <Route exact path='page2'>
                  <Route exact path='index' element={<Test2 />} />
                  <Route exact path="sub1" element={<Sub1 />} />
                  <Route exact path="sub2" element={<Sub2 />} />
                </Route>
              </Route>
            </Route>
          </Routes>
        </Suspense>
      </BrowserRouter>
    </div>
  );
}

export default App;
